﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery EasyUI Extensions - Nav Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="../jquery-easyui-theme/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../jquery-easyui-theme/icon.css" rel="stylesheet" type="text/css" />
    <script src="../jquery/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="../jquery-easyui-1.3.6/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../jquery-easyui-1.3.6/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <style type="text/css">

        .nav-menu {
            margin: 20px 0 0 100px;
            padding: 0;
        }

        .nav-menu-li {
            list-style-type: none;
            float: left;
            margin: 0 20px 0 0;
            padding: 0;
            border: 1px solid;
            text-align: center;
            width: 120px;
            height: 30px;
            line-height: 30px;
        }

        .nav-menu-sub {
            position: fixed;
            list-style-type: none;
            margin: 0;
            padding: 5px 0 0 0;
            width: 120px;
            display: none;
            z-index: 10000
        }

        .nav-menu-li:hover .nav-menu-sub {
            display: inherit;
        }

        .nav-menu-sub > li {
            border-style: solid;
            border-width: 0 1px 1px 1px;
            height: 25px;
            line-height: 25px;
        }

        .nav-menu-sub > li:first-child {
            border-top-width: 1px;
        }
    </style>
</head>
<body class="easyui-layout" data-options="fit: true">
    <div data-options="region: 'north', split: true" style="height: 80px;">
        <ul class="nav-menu">
            <li class="nav-menu-li">
                <span>测试菜单1</span>
                <ul class="nav-menu-sub">
                    <li>测试子菜单11</li>
                    <li>测试子菜单12</li>
                    <li>测试子菜单13</li>
                    <li>测试子菜单14</li>
                </ul>
            </li>
            <li class="nav-menu-li">
                <span>测试菜单2</span>
                <ul class="nav-menu-sub">
                    <li>测试子菜单21</li>
                    <li>测试子菜单22</li>
                    <li>测试子菜单23</li>
                    <li>测试子菜单24</li>
                </ul>
            </li>
            <li class="nav-menu-li">
                <span>测试菜单3</span>
                <ul class="nav-menu-sub">
                    <li>测试子菜单31</li>
                    <li>测试子菜单32</li>
                    <li>测试子菜单33</li>
                    <li>测试子菜单34</li>
                </ul>
            </li>
            <li class="nav-menu-li">
                <span>测试菜单4</span>
                <ul class="nav-menu-sub">
                    <li>测试子菜单41</li>
                    <li>测试子菜单42</li>
                    <li>测试子菜单43</li>
                    <li>测试子菜单44</li>
                </ul>
            </li>
            <li class="nav-menu-li">
                <span>测试菜单5</span>
                <ul class="nav-menu-sub">
                    <li>测试子菜单51</li>
                    <li>测试子菜单52</li>
                    <li>测试子菜单53</li>
                    <li>测试子菜单54</li>
                </ul>
            </li>
        </ul>
    </div>
    <div data-options="region: 'west', split: true" style="width: 200px;">

    </div>
    <div data-options="region: 'center'">

    </div>


</body>
</html>
